<template>
	<view class="content">
		<view class="top_sel">
			<view :class="{'topCli': searShow == true,'top': searShow == false}">
				<view class="searchBox">
					<view class="searchFor">
						<image src="../../static/search.png" mode=""></image>
					</view>
					<view style="width: 80%;">
						<input style="width: 80%;" @click="patt()" @input="inWork()" type="text" v-model="workName" :placeholder="work">
					</view>
				</view>
			</view>
			<view v-if="searHide" @click="call_off()" 
					style="width: 80rpx;
						   height: 50rpx;
						   text-align: center;
						   line-height: 50rpx;
						   font-size: 30rpx;">取消</view>
			<view v-else style="width: 80rpx;height: 50rpx;"></view>
		</view>
		<view v-if="searShow == false">
			<view class="list" style="position: relative;">
				<view class="leftList">
					
					<view class="forBox" @click="order($event,index)" v-for="(items,index) in level" :key="index">
						<view :class="{'dynamic':ind == index}">{{items.name}}</view>
					</view>
				</view>
				<view class="rightList">
					<view @click="stage($event,index)" v-for="(item,index) in level[ind].children" :key="index">
						{{item.name}}
					</view>
				</view>
			</view>
			<view class="bottomList" v-if="selName.length > 0">
				<view class="choose">
					<view>我选择的工种</view>
					<view>已选{{selName.length}}/7</view>
				</view>
				<view class="workList">
					<view class="mySelet" v-for="(item,index) in selName" :key="index">
						<view>[{{item.sel}}]</view>
						<view>{{item.two}}
							<view class="offCard" @click="offOpt(index)">×</view>
						</view>
					</view>
				</view>
			</view>
			<view v-else>
			
			</view>
			<view class="but">
				<view class="clears" @click="clearWork()">清除</view>
				<view class="okay" @click="okUp()">确定选择</view>
			</view>
		</view>
		<!-- v-if="wholeWord != ''" -->
		<view class="searchList" v-else>
			<view @click="workSear(item)" v-for="(item,index) in wholeWord" :key="index">
				{{item.name}}
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp()
	export default {
		data() {
			return {
				workName: '',
				work: '搜索工种',
				level: [],
				ind: 0,
				gId: '',
				twoPid: '',
				selName: [],
				now: '',
				lenNum: 0,
				pageurl: '',
				wholeWord: [],
				searShow: false,
				searHide: false,
			}
		},
		onLoad(options) {
			if(options.pageurl) this.pageurl = options.pageurl
			if(options.work) this.selName = JSON.parse(options.work)
			console.log('options',options)
		},
		onShow() {
			// console.log('2',app.globalData)
			var Array = []
			app.getData('addons/shopro/category/gz', {}).then(res => {
				console.log(res.data.data)
				var arr = res.data.data
				arr.forEach(function(item) {
					Array.push(item)
				})
				this.level = Array
				console.log('111111111', this.level)
			})

		},
		methods: {
			patt() {
				this.searShow = true,
				this.searHide = true
			},
			call_off() {
				this.searShow = false,
				this.searHide = false
			},
			inWork() {
				var _this = this
					var word = []
					if (this.workName != '') {
						var work = this.level
						work.forEach(function(item) {
							// console.log(item.children)
							var workList = item.children
							workList.forEach(item => {
								// console.log(item)
								if(_this.workName == item.name) {
									// console.log(item)
									var selPid = item
									var eve = _this.level
									eve.forEach(item => {
										// console.log(item,'全部工种')
										if(item.id == selPid.pid) {
											console.log(item,'筛选出来的工种')
											let pids = {
												bigName: item.name,
												name: selPid.name,
												id: selPid.id
											}
											word.push(pids)
										}
									})
									
								}
							})
						})
					}
					this.wholeWord = word
					console.log(this.wholeWord)
				},
			order($event, index) {
				console.log(index)
				this.ind = index

			},
			stage($event, index) {
				// 获取工种id
				this.now = this.level[this.ind].children[index].id
				const Arr = this.selName
				var lists = []
				var out = []
				// 判断已选几项工种
				if(this.selName.length <= 6) {
					for (var i = 0; i < Arr.length; i++) {
						console.log('没有', Arr[i].uId != this.now)
						// 判断工种数组中是否存在该值
						if (Arr[i].uId != this.now || Arr[i] == '') {
							console.log('没有')
							var workSel = this.level
							workSel.forEach(function(item) {
								// console.log(item.id)
							})
						} else {
							// 存在该值进行截取操作
					
							uni.showToast({
								icon: 'error',
								title: '每项最多选一次',
								duration: 2000
							});
							Arr.splice(i, 1)
					
						}
					
					}
				} else {
					uni.showToast({
						icon: 'error',
						title: '最多选择7项',
						duration: 2000
					});
				}
				
				// 判断用户选择的是否是第一个大分类
				if (this.ind == 0) {
					// 获取当前点击的大分类ID
					this.gId = this.level[this.ind].id
					// 获取当前点击的工种PID
					this.twoPid = this.level[this.ind].children[index].pid
					// 判断点击的pid和外部大分类id是否相同
					if (this.gId == this.twoPid) {
						// 将选择的工种存入数组
						let value = {
							sel: this.level[this.ind].name,
							two: this.level[this.ind].children[index].name,
							uId: this.level[this.ind].children[index].id
						}
						this.selName.push(value)
					} else {
						console.log('网络错误，刷新一下试试')
					}
				} else {
					// 获取当前点击的大分类ID
					this.gId = this.level[this.ind].id
					// 获取当前点击的工种PID
					this.twoPid = this.level[this.ind].children[index].pid
					// console.log(this.gId)
					if (this.gId == this.twoPid) {
						// console.log('相同')
						// console.log(this.level[this.ind].name,this.level[this.ind].children[index].name)
						let value = {
							sel: this.level[this.ind].name,
							two: this.level[this.ind].children[index].name,
							uId: this.level[this.ind].children[index].id
						}
						this.selName.push(value)
					} else {
						console.log('网络错误，刷新一下试试')
					}
				}
				console.log(this.selName)
			},
			// 删除选择的某个工种
			offOpt(index) {
				// console.log(index)
				this.selName.splice(index, 1)
				// console.log(this.selName)
			},
			clearWork() {
				this.selName = []
			},
			okUp() {
				let list = []
				console.log(this.selName)
				for (var i = 0; i < this.selName.length; i++) {
					list.push(this.selName[i].uId)

					// return list
				}
				console.log(list)
				if (this.selName != []) {
					uni.setStorage({
						key: 'work_name',
						data: this.selName,
						success(res) {
							console.log(res)
						}
					})
					if(this.pageurl == 'project'){
						uni.navigateBack({
							delta:1
						})
					}else{
						uni.switchTab({
							url: '/pages/home/home'
						})
					}
					
				}
			},
			// 搜索到的工种
			workSear(id) {
				console.log(id,'搜索后点击的')
				console.log(id)
				let value = {
					sel: id.bigName,
					two: id.name,
					uId: id.id
				} 
				console.log(value)
				this.selName.push(value)
				this.workName = ''
				this.wholeWord = []
				this.searShow = false
				this.searHide = false
			}
		}
	}
</script>

<style>
	image {
		width: 100%;
		height: 100%;
	}
	.top_sel {
		width: 100%;
		height: 60rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding: 10rpx 0 10rpx 0;
	}
	.top {
		display: flex;
		height: 60rpx;
		width: 500rpx;
		background-color: #f2f2f2;
		border-radius: 30rpx;
	}
	.topCli {
		display: flex;
		height: 60rpx;
		width: 500rpx;
		background-color: #f2f2f2;
		border-radius: 30rpx;
	}
	.searchBox {
		display: flex;
		align-items: center;
		width: 580rpx;
		margin-left: 30rpx;
	}

	.searchFor {
		width: 50rpx;
		height: 50rpx;
		margin-right: 20rpx;
	}

	.list {
		display: flex;
	}
	.searchList {
		width: 100%;
		margin: 0 auto;
		background-color: #FFF;
	}
	.searchList view {
		width: 200rpx;
		font-size: 26rpx;
		color: #1e9efe;
		padding: 20rpx 0 20rpx 50rpx;
	}
	.leftList {
		width: 210rpx;
		overflow: scroll;
		height: 980rpx;
	}

	.leftList .forBox {
		height: 100rpx;
		word-wrap: break-word;
		text-align: center;
	}

	.rightList {
		width: 542rpx;
		background: #f1f1f1;
		overflow: scroll;
		height: 980rpx;
	}

	.rightList view {
		padding: 20rpx;
	}

	.forBox view {
		width: 200rpx;
		height: 100%;
		border-left: 10rpx solid #fff;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.forBox .dynamic {
		background: #f1f1f1;
		word-wrap: break-word;
		border-left: 10rpx solid #1e9efe;
		color: #1e9efe;
	}
	.bottomList {
		width: 100%;
		background-color: #fff;
		position: fixed;
		bottom: 122rpx;
		left: 0;
	}
	.but {
		width: 100%;
		height: 100rpx;
		background-color: #fff;
		padding: 20rpx;
		position: fixed;
		bottom: 0%;
		left: 0;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.clears {
		border: 2rpx solid #1e9efe;
		padding: 20rpx 80rpx;
		border-radius: 10rpx;
		color: #1e9efe;
	}

	.okay {
		background-color: #1e9efe;
		color: #fff;
		padding: 20rpx 120rpx;
		border-radius: 10rpx;
	}

	.mySelet {
		display: flex;
		color: #1e9efe;
	}

	.mySelet>view {
		padding: 10rpx 20rpx;
		margin: 10rpx 30rpx;
		background-color: #E7F4FD;
		position: relative;
	}

	.offCard {
		width: 28rpx;
		height: 28rpx;
		line-height: 28rpx;
		text-align: center;
		color: #fff;
		background-color: #1e9efe;
		border-radius: 50%;
		position: absolute;
		top: -8rpx;
		right: -8rpx;
	}

	.choose {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10rpx 20rpx;
	}

	.choose view:nth-child(1) {
		font-size: 30rpx;
		font-weight: bold;
	}

	.choose view:nth-child(2) {
		font-size: 22rpx;
		color: #8F8F8F;
	}

	.workList {
		height: 200rpx;
		overflow: hidden;
		overflow: scroll;
	}
</style>
